<template>
  <div class="TableExcel2">
      <!--给表格添加一个id，导出文件事件需要使用-->
      <el-table
      :data="tableData"
      border
      style="width:100%"
      id="outTable"
      >
      <el-table-column
          prop="date"
          label="日期"
          width="180"
         
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180"
          
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          
      >
      </el-table-column>
      </el-table>
      <!--给按钮绑定事件-->
      <el-button  type="primary" @click="exportExcel">点击导出</el-button>
  </div>
  </template>

  <script>
  // 引入导出Excel表格依赖  也可以在main.js 中引入   XLSX 高版本有问题
  //import FileSaver from "file-saver";
  import XLSX from "xlsx";

  export default {
  name: "TableExcel2",
  data() {
      return {
      tableData: [
          {
          date: "100%",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
          },
          {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
          },
          {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
          },
          {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
          }
      ]
      };
  },
  mounted() {},
  methods: {
      //定义导出Excel表格事件   导出数据一样会重复
    exportExcel() {
      // 如果数据中带有‘100%’等数据，不想被处理为小数，加{raw:true}即可  100% 没有 raw:true 会解析成1  有就是 100%
      let excelTab = document.querySelector(".el-table__fixed-right");
      let webText;
      if(excelTab){
        webText = this.XLSX.utils.table_to_book(document.querySelector("#outTable").removeChild(excelTab),{raw:true});
        document.querySelector("#outTable").appendChild(excelTab);
      }else{
        webText = this.XLSX.utils.table_to_book(document.querySelector("#outTable"),{raw:true});  
      }
      // el-table-column 上加了 fixed 属性才要 先清掉再添加  没有加 fixed 属性  直接
      // var webText = this.XLSX.utils.table_to_book(document.querySelector("#outTable"),{raw:true});  
      /* 获取二进制字符串作为输出 */
      var wbout = this.XLSX.write(webText, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
      });
      try {
          this.fileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
          );
      } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
      },
    }
  };
  </script>

  <style lang="scss" scoped>
  .TableExcel2{
    .table {
       width: 100%;
       height: 300px;
     }
    .el-button{
       margin-top:20px;
    }
  }

  </style>